<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>深度票据网番茄工作台   </title>
<script type="text/javascript" src="vue.js"></script>
<link rel="stylesheet" type="text/css" href="app.css">
<link rel="shortcut icon" href="icon.png">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="layui.css?t=1520760931738">

</head>
<body>

	<div class="main">
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
					<div v-show="!userId.length" class="loginDiv">
						<p><img alt="" src="icon.png" style="border: none;width: 30px;display: inline;"><h2>深度票据网番茄工作台 </h2></p>
						<p><input placeholder="请输入姓名" v-model="user.name" @blur="checkUser"></p>
						<p><input placeholder="请输入密码" v-model="user.pwd" type="password"></p>
						<p>
							<select v-model="user.departNo" v-show="notExist">
								<option value="">请选择部门</option>
								<option v-for="(item,index) in departList" :value="item.no">{{item.name}}</option>
							</select>
						</p>
						<p v-show="loginTip" class="loginTip">{{loginTip}}</p>
						<p><input type="button" value="登录" @click="login"></p>
						<p class="loginTip">首次登录即可完成注册</p>
						<p class="loginTip">不推荐使用IE(任何版本)</p>
					</div>
				</div>
				<div  v-show="userId.length" >
				
				
				<div class="layui-col-xs12 layui-col-sm12 layui-col-md12" >
					<h2 style="text-align: center;margin: 30px 0 10px">深度票据网番茄工作台 </h2>
					<h4 style="text-align: center;margin: 20px 0;color: #a1a1a1;">精细化管理时间，高效协同，快乐工作每一天！ </h4>
				</div>
					
				<div class="layui-col-xs12 layui-col-sm12 layui-col-md12" >
					<input :placeholder="sorts[sort]" class="task-input" type="text"
						v-model="task" @keyup.enter="addTodo" />
				</div>
				<div class="tasks layui-col-xs12 layui-col-sm12 layui-col-md6" :class="{checkedTask:sort==2}">
					<p class="no-task-tip task-title"  @click="cgesort(2)">我的OKR</p>
					<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
					<ul class="todo-list">
						<li class="todo" v-for="item in okrList"
							:class="{completed: item.checked,editing:item === editItem}">
							<div class="view">
								<div class="word">
									<label @dblclick="editTodo(item)">{{item.task}}</label>
								</div>
								<button class="destroy" type="text" @click="deleteTodo(item)">×</button>
							</div> <input v-focus="editItem === item" class="edit" type="text"
							v-model="item.task" @blur="edited" @keyup.enter="edited"
							@keyup.esc="cancel(item)" />
						</li>
					</ul>
				</div>
				<div class="tasks layui-col-xs12 layui-col-sm12 layui-col-md6"
					:class="{checkedTask:sort==0}">
					<p class="no-task-tip task-title" @click="cgesort(0)">计划任务</p>
					<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
					<ul class="todo-list">
						<li class="todo" v-for="item in unfinishedPlIST"
							:class="{completed: item.checked,editing:item === editItem}">
							<div class="view">
								<div class="word">
									<input class="toggle" type="checkbox" v-model="item.checked">
									<label @dblclick="editTodo(item)">{{item.task}}</label>
								</div>
								<div>
									<div style="margin-bottom: -15px;"><input type="time" v-model="item.startTime"> 
									</div>
									<input type="time" v-model="item.endTime">
									<button class="destroy" type="text" @click="deleteTodo(item)">×</button>
								</div>
							</div> <input v-focus="editItem === item" class="edit" type="text"
							v-model="item.task" @blur="edited" @keyup.enter="edited"
							@keyup.esc="cancel(item)" />
						</li>
						<li class="todo" v-for="item in finishedPlIST"
							:class="{completed: item.checked,editing:item === editItem}">
							<div class="view">
								<div class="word">
									<input class="toggle" type="checkbox" v-model="item.checked" >
									<label>{{item.task}}</label>
								</div>
								<div>
									<div style="margin-bottom: -15px;"><input type="time" v-model="item.startTime"> 
									</div>
									<input type="time" v-model="item.endTime">
									<button class="destroy" type="text" @click="deleteTodo(item)">×</button>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="tasks layui-col-xs12 layui-col-sm12 layui-col-md6"
					:class="{checkedTask:sort==1}">
					<p class="no-task-tip task-title" @click="cgesort(1)">临时任务</p>
					<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
					<ul class="todo-list">
						<li class="todo" v-for="item in unfinishedAlIST"
							:class="{completed: item.checked,editing:item === editItem}">
							<div class="view">
								<div class="word">
									<span :class="{startTask:item.status==0,pauseTask:item.status==1}"
										@click="opTask(item)"> &nbsp;&nbsp;&nbsp; </span> 
								    <input class="toggle" type="checkbox" v-model="item.checked" @click="finishTask(item)">
									<label @dblclick="editTodo(item)">{{item.task}}</label>
								</div>
								<div>
									<span class="runTime">{{item.status==1?showTime(run.time,item):showTime(item.lastSaveRuntime)}}</span>
									<button class="destroy" type="text" @click="deleteTodo(item)">×</button>
								</div>
							</div> 
							<input v-focus="editItem === item" class="edit" type="text"
								v-model="item.task" @blur="edited" @keyup.enter="edited" @keyup.esc="cancel(item)" />
						</li>
						<li class="todo" v-for="item in finishedAlIST"
							:class="{completed: item.checked,editing:item === editItem}">
							<div class="view">
								<div class="word">
									<input class="toggle" type="checkbox" v-model="item.checked">
									<label>{{item.task}}</label>
								</div>
								<div class="op">
									<span class="runTime">{{item.status==1?showTime(run.time,item):showTime(item.lastSaveRuntime)}}</span>
									<button class="destroy" type="text" @click="deleteTodo(item)">×</button>
								</div>
							</div>
						</li>
					</ul>
				</div>
				</div>
			</div>
		</div>

		<div v-show="userId.length">
			<ul class="task-count" v-show="unCheckedLength.length">
				<li>{{unCheckedLength}}个任务未完成</li>
			</ul>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
	<script src="app.js"></script>

</body>
</html>